<!--新房-->
<template>
  <div class="New">
    <div class="New_head">
      <van-icon name="arrow-left" @click="back" />
      <h3>新房</h3>
      <p>
        <van-icon name="ellipsis" />
        <van-icon name="award-o" />
      </p>
    </div>

    <div class="New_main">
      <div class="New_main_one">
        <p>北京</p>
        <div class="search">
          <input type="text" placeholder="请在这里输入区域/商圈" />
          <van-icon name="search" />
        </div>
        <p>地图找房</p>
      </div>

      <div class="New_main_two">
        <ul>
          <li><van-icon name="newspaper-o" />商铺</li>
          <li><van-icon name="chart-trending-o" />写字楼</li>
          <li><van-icon name="hotel-o" />小区</li>
        </ul>
      </div>

      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="item">
          <van-picker
            value-key="province"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            value-key="price"
            :columns="priceList"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-dropdown-item>
        <van-dropdown-item title="户型" ref="item">
          <van-picker
            value-key="price"
            :columns="priceList"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-dropdown-item>
          <van-dropdown-item title="筛选" ref="item">
          <van-picker
            value-key="price"
            :columns="priceList"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-dropdown-item>
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      newlist: [],
      columns: [],
      priceList: [],
    };
  },
  methods: {
    //返回上一页
    back() {
      history.go(-1);
    },

    //获取数据
    New() {
      axios.get("/home/newHouse").then((res) => {
        // console.log(res);
        this.newlist = res.data.data;
      });
    },

    //省市区
    Find() {
      axios.get("/home/proviced").then((res) => {
        // console.log(res);
        this.columns = res.data.data;
      });
    },

    //价格 户型 筛选
    Select() {
      axios.get("/home/select").then((res) => {
        console.log(res);
        this.priceList = res.data.body.priceList;
      });
    },

    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      console.log("取消");
    },
  },

  created() {
    this.New();
    this.Find();
    this.Select();
  },
};
</script>

<style>
.New {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.New_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background: #2693fa;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.New_head p {
  border: 1px solid #e6e6e6;
  border-radius: 40px;
}
.New_head p .van-icon {
  padding: 4px 10px;
}
.New_main {
  flex: 1;
  overflow-y: scroll;
}
.New_main_one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 5px 10px;
  background: #f8f6f6;
}
.search input {
  border: none;
  background: #f8f6f6;
}
.New_main_two {
  width: 100%;
  height: 80px;
}
.New_main_two ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.New_main_two ul li {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
}
.New_main_three {
  width: 100%;
  height: 80px;
}
</style>